<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>防抖</title>
	<style>
		h3{	width: 300px; height: 300px; background-color: #afa;}
	</style>
</head>
<body>
	<h3>防抖</h3>
	<h3>防抖</h3>
	<h3>防抖</h3>
	<h3>防抖</h3>
	<h3>防抖</h3>
	<h3>防抖</h3>
	<h3>防抖</h3>
	<h3>防抖</h3>
	<script type="text/javascript">
		// 防抖
		function debounce(fn, delay) {
			var timer = null;
			return function() {
			// 闭包 如果定时器存在，清除定时器
				if(timer){ clearTimeout(timer)}
			//如果定时器不存在，则执行fn
				timer = setTimeout(fn,delay)
			}
		}
		window.onscroll = debounce(showTop,200);
		function showTop() {
			// console.log(111111);
			var scrolltop = document.documentElement.scrollTop;
			console.log( '滚动条位置：' + scrolltop);
		}
	</script>
	
</body>
</html>